<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="css/mendian.css"/>
</head>

<body>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" th:href="@{/index.html}">
        <!--<span class="mui-icon mui-icon-home"></span>-->
        <span class="mui-icon"><img th:src="@{/img/fenlei/luntai.png}" /></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" th:href="@{/mendianList.html}">
        <!--<span class="mui-icon mui-icon-bars"></span>-->
        <span class="mui-icon"><img th:src="@{/img/fenlei/jiyou.png}" /></span>
        <span class="mui-tab-label">门店</span>
    </a>
    <a class="mui-tab-item" th:href="@{/my.html}">
        <span class="mui-icon"><img th:src="@{/img/fenlei/meirong.png}" /></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">美容清洗</h1>
    <a class="mui-icon mui-icon-more mui-pull-right"></a>
</header>
<div class="mui-content">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="img/mendian/1.jpg" />
                <div class="mui-media-body">
                    <p class="dianming">
                        <span class="mui-pull-right">30元</span> 广州番禺市连路店
                    </p>
                    <p class='pj'>评价 <span>4.92</span> | 12单</p>
                    <p>
                        <span class="mui-pull-right">2.99KM</span> 好汉家四方
                    </p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="img/mendian/2.jpg" />
                <div class="mui-media-body">
                    <p class="dianming">
                        <span class="mui-pull-right">18元</span> 广州番禺亚运大道店
                    </p>
                    <p class='pj'>评价 <span>4.78</span> | 159单</p>
                    <p>
                        <span class="mui-pull-right">3.20KM</span> 海傍村路口加油站附近
                    </p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="img/mendian/3.jpg" />
                <div class="mui-media-body">
                    <p class="dianming">
                        <span class="mui-pull-right">25元</span> 广州番禺市港莲大道店
                    </p>
                    <p class='pj'>评价 <span>4.92</span> | 12单</p>
                    <p>
                        <span class="mui-pull-right">3.28KM</span> 好汉家四方
                    </p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="img/mendian/4.jpg" />
                <div class="mui-media-body">
                    <p class="dianming">
                        <span class="mui-pull-right">25元</span> 广州番禺市连路店
                    </p>
                    <p class='pj'>评价 <span>4.92</span> | 12单</p>
                    <p>
                        <span class="mui-pull-right">4.57KM</span> 好汉家四方
                    </p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="img/mendian/5.jpg" />
                <div class="mui-media-body">
                    <p class="dianming">
                        <span class="mui-pull-right">18元</span> 广州番禺市连路店
                    </p>
                    <p class='pj'>评价 <span>4.92</span> | 12单</p>
                    <p>
                        <span class="mui-pull-right">5.12KM</span> 好汉家四方
                    </p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="img/mendian/6.jpg" />
                <div class="mui-media-body">
                    <p class="dianming">
                        <span class="mui-pull-right">35元</span> 广州番禺市连路店
                    </p>
                    <p class='pj'>评价 <span>4.92</span> | 12单</p>
                    <p>
                        <span class="mui-pull-right">5.33KM</span> 好汉家四方
                    </p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="img/mendian/7.jpg" />
                <div class="mui-media-body">
                    <p class="dianming">
                        <span class="mui-pull-right">44元</span> 广州番禺市连路店
                    </p>
                    <p class='pj'>评价 <span>4.92</span> | 12单</p>
                    <p>
                        <span class="mui-pull-right">8.76KM</span> 好汉家四方
                    </p>
                </div>
            </a>
        </li>
    </ul>
</div>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    mui('.mui-table-view').on('tap', 'li a', function () {
        window.location.href = "mendianDetail.html";
    })
</script>
</body>

</html>